<template>
	<view class="real-name-page">
		<view class="section-box">
			<view class="s-title">请上传本人身份证照</view>
			<view class="s-sub">为有效保障您的租赁体验，提高订单审核效率，请填写与您身份证一致的信息，否则不会审核通过。</view>
			<view class="upload-box">
				<view class="item">
					<image src="./imgs/real-name-face.png"></image>
					<view class="title">上传身份证人像面</view>
				</view>
				<view class="item">
					<image src="./imgs/real-name-country.png"></image>
					<view class="title">上传身份证国徽面</view>
				</view>
			</view>
		</view>
		
		<view class="section-box">
			<view class="set-form">
				<view class="note">
					<image src="/static/images/icon/warn.png"></image>
					<text>姓名与支付宝实名认证信息相关联且不可更改！</text>
				</view>
				
				<view class="item">
					<view class="label">真实姓名</view>
					<input type="text" class="set" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="label">身份证号</view>
					<input type="text" class="set" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="label">手机号码</view>
					<input type="text" class="set" placeholder="请输入" />
				</view>
			</view>
		</view>
		
		<view class="section-box">
			<view class="s-title">拍摄身份证规范要求</view>
			<view class="s-sub">大陆公民持有的本人有效二代身份证，拍摄时确保身份证 <text>边框完整、字体清晰、亮度均匀。</text></view>
			<view class="demand-box">
				<view class="item">
					<image src="./imgs/real-name-1.png"></image>
					<view class="title">正确示范</view>
				</view>
				<view class="item">
					<image src="./imgs/real-name-2.png"></image>
					<view class="title">曝光强烈</view>
				</view>
				<view class="item">
					<image src="./imgs/real-name-3.png"></image>
					<view class="title">边框缺失</view>
				</view>
				<view class="item">
					<image src="./imgs/real-name-4.png"></image>
					<view class="title">照片模糊</view>
				</view>
			</view>
		</view>
		
		<view class="fixed-one-btn">
			<view class="f-btn">确定提交</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	page { background-color: #F5F7FA; }
	.real-name-page {
		padding: 0 24rpx 140rpx 24rpx;
		
		.section-box {
			margin-top: 24rpx;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			
			.s-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 32rpx;
			}
			
			.s-sub {
				margin-top: 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				
				text {
					color: #FF271F;
				}
			}
		}
	
		.upload-box {
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;
			border: 1rpx dashed #707070;
			
			.item {
				width: 316rpx;
				text-align: center;
				
				image {
					width: 100%;
					height: 208rpx;
				}
				
				.title {
					margin-top: 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 28rpx;
				}
			}
		}
	
		.set-form {
			.note {
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				width: 100%;
				height: 64rpx;
				background: #FFF8EB;
				border-radius: 32rpx;
				
				image {
					width: 32rpx;
					height: 32rpx;
				}
				
				text {
					margin-left: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FF7029;
				}
			}
		
			.item {
				display: flex;
				align-items: center;
				height: 92rpx;
				
				&~.item {
					border-top: 2rpx solid #F5F5F5;
				}
				
				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
				}
				
				.set {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					text-align: right;
					border: none;
				}
			}
		}
	
		.demand-box {
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;
			
			.item {
				width: 150rpx;
				
				image {
					width: 150rpx;
					height: 128rpx;
				}
				
				.title {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 24rpx;
					text-align: center;
				}
			}
		}
	}
</style>